<!-- 水表抄表 -->
<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-input v-model="queryParams.storeCode" class="zs-select-md zs-space-right-sm" placeholder="铺位编号" clearable @blur="queryList" />
				<!-- <el-input v-model="queryParams.routeName" class="zs-select-md zs-space-right-sm" placeholder="商户名称" clearable @blur="queryList" /> -->
				<el-input v-model="queryParams.brandName" class="zs-select-md zs-space-right-sm" placeholder="品牌名称" clearable @blur="queryList" />
				<el-input v-model="queryParams.deviceNum" class="zs-select-md zs-space-right-sm" placeholder="表编号" clearable @blur="queryList" />
				<el-button class="zs-btn-plain" @click="queryList" v-btnPermi="{ permis: ['p_btn_property_project_watermeter_readrecord_list_from_query'] }"> 查询 </el-button>
			</span>
			<span>
				<el-button class="zs-btn-md zs-btn-primary" @click="pushFn(true)" v-btnPermi="{ permis: ['p_btn_property_project_watermeter_readrecord_list_from_pushall'], businessFlag: true }">全部推送</el-button>
			</span>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" align="center" :index="(index) => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="storeCode" label="铺位编号" minWidth="120" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<!-- <el-table-column prop="routeName" label="商户名称" minWidth="120" show-overflow-tooltip align="left" :formatter="defaultTableData" /> -->
				<el-table-column prop="brandName" label="品牌名称" minWidth="120" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="deviceNum" label="水表编号" minWidth="120" align="left" show-overflow-tooltip :formatter="defaultTableData" />
				<el-table-column prop="multiplier" label="倍率" align="center" :formatter="defaultTableData" />
				<el-table-column prop="floorNum" label="楼层" align="center" :formatter="defaultTableData" />
				<el-table-column prop="deviceLocation" label="水表位置" minWidth="120" align="center" show-overflow-tooltip :formatter="defaultTableData" />
				<el-table-column prop="formatPushTime" label="上次抄表日期" minWidth="120" align="center" :formatter="defaultTableData" />
				<el-table-column prop="beforeUncle" label="上次抄表读数" minWidth="120" align="right" :formatter="defaultTableData" />
				<el-table-column prop="formatCurrentTime" label="本次抄表日期" minWidth="120" align="center" :formatter="defaultTableData" />
				<el-table-column prop="currentUncle" label="本次抄表读数" minWidth="120" align="right" :formatter="defaultTableData" />
				<el-table-column prop="dosage" label="用量" align="right" :formatter="defaultTableData" />
				<el-table-column prop="pushStatusName" label="推送状态" minWidth="120" align="center" :formatter="defaultTableData" />
				<el-table-column prop="" label="操作" width="170" align="center">
					<template #default="{ row }">
						<el-button class="zs-link" link :disabled="!row.pushStatus || row.pushStatus == 0 ? false : true" size="small" @click="openDrawer(false, 'add', row, 'base')" v-btnPermi="{ permis: ['p_btn_property_project_watermeter_readrecord_list_from_details'] }">抄表</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link :disabled="row.pushStatus == 1 ? false : true" size="small" @click="openDrawer(false, 'edit', row, 'base')" v-btnPermi="{ permis: ['p_btn_property_project_watermeter_readrecord_list_from_edit'], businessFlag: true }">修改</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link :disabled="row.pushStatus == 1 ? false : true" size="small" @click="pushFn(false, row)" v-btnPermi="{ permis: ['p_btn_property_project_watermeter_readrecord_list_from_push'], businessFlag: true }">推送</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>

	<!-- 定义抽屉 -->
	<DrawerCopy :isShow="drawer.base.isShowDrawer" :isReadOnly="drawer.base.isReadOnly" :handleType="drawer.base.handleType" :currentRow="currentRow.data" @close="closeDrawer($event, 'base')"> </DrawerCopy>
</template>

<script setup>
	import DrawerCopy from '../components/drawerCopy.vue';
	import { waterCopyListApi, waterCopyPushApi, waterCopyPushAllApi } from '@/api/energy.js';
	import { ref, reactive } from 'vue';
	import { ElMessageBox, ElMessage } from 'element-plus';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';
	import { defaultTableData, parseTime } from '@/utils/publicUtils';

	const route = useRoute();
	const store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [{ beilv: 0.5 }],
	});

	//查询条件
	let queryParams = reactive({ projectCode: route.query.projectCode, pageNumber: 1, pageSize: curPageSize.value });

	// 抽屉相关
	let currentRow = reactive({ data: {} });
	let drawer = reactive({
		base: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
	});

	const openDrawer = (flag, handleType, row, drawerType) => {
		drawer[drawerType].isReadOnly = flag;
		drawer[drawerType].isShowDrawer = true;
		drawer[drawerType].handleType = handleType;
		currentRow.data = row;
	};

	const closeDrawer = (data, drawerType) => {
		drawer[drawerType].isShowDrawer = data.isShow;
		data.isRefresh && queryList('init');
	};

	// 列表数据源
	const queryList = async init => {
		if (process.env.NODE_ENV !== 'development') {
			let portalResourceList = JSON.parse(localStorage.getItem('portalResourceList'));
			if (init != 'init' && !portalResourceList.includes('p_btn_property_project_watermeter_readrecord_list_from_query')) return;
		}
		tableData.loading = true;
		let res = await waterCopyListApi(queryParams);
		if (res.data.code !== 200) return;
		initData(res.data.data.list);
		tableData.data = res.data.data.list || [];
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	const initData = list => {
		list.forEach(item => {
			item.pushStatusName = item.pushStatus == 1 ? '未推送租赁' : item.pushStatus == 2 ? '已推送租赁' : '-';
			item.formatPushTime = parseTime(item.pushTime, '{y}-{m}-{d}');
			item.formatCurrentTime = parseTime(item.currentTime, '{y}-{m}-{d}');
		});
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			queryParams.pageSize = size;
		} else {
			queryParams.pageNumber = size;
		}
		queryList('init');
	};

	//推送
	const pushFn = (isAll, row) => {
		ElMessageBox.confirm('确定推送?', {
			confirmButtonText: '是',
			cancelButtonText: '否',
			type: 'warning',
		})
			.then(async () => {
				let res = isAll ? await waterCopyPushAllApi(route.query.projectCode) : await waterCopyPushApi(row.id);
				if (res.data.code == 200) {
					ElMessage({
						message: '提交成功',
						type: 'success',
					});
					queryList()
				}
			})
			.catch(() => {});
	};

	queryList('init');
</script>
